<template>
  <view class="shopInfo" v-if="data">
    <view class="shopInfoData" @click="openPop">
      <view class="shopInfoDataLet">
        <view class="name" @click.stop="showPopup = true">{{ data.name }}</view>
        <view class="addr" @click.stop="showPopup = true">
          <view class="addrCon">{{ data.address }}</view>
        </view>

        <view class="distance" v-if="data.distance"
          >{{ $t("shop.distance") }}{{ data.distance }}</view
        >
        <view
          class="tab"
          v-if="one_store_switch_store && hasSingleStore"
          @click.stop="showShopList = true"
          >切换店铺 <i class="iconfont icon-arrow-right"></i
        ></view>
      </view>
      <div class="rig">
        <view class="logo">
          <image :src="data.logo" mode="aspectFill"></image>
        </view>

        <view class="shop-icons">
          <view class="icon-box" @click.stop="guideToShop(data)">
            <i class="iconfont icon-map-filling1"></i>
            <view class="txt">导航</view>
          </view>
          <view class="icon-box" @click.stop="phoneToShop(data.mobile)">
            <i class="iconfont icon-phone"></i>
            <view class="txt">电话</view>
          </view>
        </view>
      </div>
    </view>

    <u-popup
      v-if="one_store_switch_store && data"
      v-model="showPopup"
      mode="bottom"
      :z-index="1214"
      border-radius="24"
      safe-area-inset-bottom
      closeable
      close-icon-color="#262626"
    >
      <view class="popData">
        <view class="title">店铺信息</view>

        <view class="info">
          <view class="img">
            <image :src="data.logo" mode="aspectFill"></image>
          </view>
          <view class="txt">{{ data.name }}</view>
        </view>

        <view class="item" v-if="data.s_time">
          <view class="icon">
            <i class="iconfont icon-clock"></i>
          </view>
          <view class="con">
            <view class="name" v-if="data.shop_time_type === '1'">
              {{ data.open_status === "0" ? "打烊" : "门店营业中" }}
              ·
              {{ data.s_time }}-{{ data.e_time }}
            </view>
            <view class="name" v-else>门店营业中 · 24小时营业</view>
          </view>
        </view>
        <view class="item" v-if="data.mobile">
          <view class="icon">
            <i class="iconfont icon-telephone-out1"></i>
          </view>
          <view class="con">
            <view class="name">{{ data.mobile }}</view>
          </view>
        </view>
        <view class="item" @click="openMap">
          <view class="icon">
            <i class="iconfont icon-a-map"></i>
          </view>
          <view class="con">
            <view class="name">{{ data.address }}</view>
            <view class="addr"
              >{{ data.province }} {{ data.city }} {{ data.district }}</view
            >
          </view>
        </view>
        <!-- #ifndef H5 -->
        <button open-type="share" class="item shareButton">
          <view class="icon">
            <i class="iconfont icon-resonserate"></i>
          </view>
          <view class="con">
            <view class="name">分享店铺给朋友</view>
          </view>
        </button>
        <!-- #endif -->
      </view>
    </u-popup>

    <u-popup
      v-if="one_store_switch_store"
      v-model="showShopList"
      mode="bottom"
      :z-index="1214"
      border-radius="24"
      safe-area-inset-bottom
      closeable
      close-icon-color="#262626"
    >
      <view class="popShopList">
        <view class="title"> 切换店铺 </view>

        <view class="search">
          <i class="iconfont icon-sousuo"></i>

          <u-input
            height="100%"
            v-model="keyword"
            @confirm="clearData"
            placeholder="请输入店铺名称"
            placeholder-style="color:#9B9B9B;"
            :custom-style="{
              background: 'none'
            }"
            class="search-input"
          ></u-input>
        </view>

        <scroll-view class="scrollView" scroll-y @scrolltolower="scrolltolower">
          <view class="list">
            <view
              class="item"
              v-for="item of list"
              :key="item.id"
              @click="active = item"
            >
              <view class="img">
                <image :src="item.logo" mode="aspectFill"></image>
              </view>

              <view class="txt">
                <view class="name"> {{ item.name }} </view>
                <view class="address" v-if="item.address">
                  {{ item.address }}
                </view>
                <view class="distance">{{ item.distance }} </view>
              </view>

              <view class="btn">
                <i
                  class="iconfont icon-success-fill"
                  v-if="active.id === item.id"
                ></i>
                <i class="iconfont icon-xuanzekuangmoren" v-else></i>
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="submit" @click="submit">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "shopInfo",
  data() {
    return {
      showPopup: false,
      data: null,
      one_store_switch_store: false,
      longitude: "",
      latitude: "",
      id: "",
      cacheStoreList: [],
      showShopList: false,

      list: [],
      keyword: "",
      page: 1,
      size: 15,
      isEnd: false,
      active: {
        id: ""
      }
    };
  },

  watch: {
    showPopup(e) {
      if (e) {
        uni.setStorageSync("logo", this.data.logo);
      } else {
        uni.removeStorageSync("logo");
      }
    },

    data: {
      handler(e) {},
      deep: true
    }
  },

  computed: {},

  async created() {
    this.one_store_switch_store = this.$store.getters.one_store_switch_store;
    try {
      let res = await this.$store.dispatch("getLocation");
      this.longitude = res.longitude;
      this.latitude = res.latitude;
      this.init();
      this.clearData();
    } catch (error) {}
  },

  methods: {
    async submit() {
      if (!this.active.id) return (this.showShopList = false);
      let { id, address, logo, distance, name, coordinate } = this.active;
      let cacheStoreList = uni.getStorageSync("cacheStoreList") || [],
        index = cacheStoreList.findIndex((el) => el.id === id);
      if (index !== -1) {
        cacheStoreList.splice(index, 1);
      }
      let obj = {
        id,
        logo,
        distance,
        name,
        address
      };

      if (coordinate) {
        let [latitude, longitude] = coordinate.split(",");
        obj.latitude = latitude;
        obj.longitude = longitude;
      } else {
        obj.latitude = "";
        obj.longitude = "";
      }

      cacheStoreList.push(obj);

      uni.setStorageSync("cacheStoreList", cacheStoreList);
      uni.removeStorageSync("storeMdData");

      if (this.$utils.isLogin(false)) {
        uni.showLoading({
          title: "切换中"
        });

        this.$allrequest.user
          .switchStoreAutoLogin({
            switch_store_id: id
          })
          .then((res) => {
            if (res.code == 0) {
              uni.removeStorageSync("wx_login_code");
              uni.setStorageSync("userInfo", res.data.user_info);
              this.$store.commit("setStoreId", id);
            } else {
              uni.showToast({
                title: "切换失败",
                icon: "none"
              });
            }
          })
          .then(() => {
            uni.hideLoading();
          });
      } else {
        this.$store.commit("setStoreId", id);
      }

      // let item;
      // let res = await this.$allrequest.alipay.getUpdateMdData({ md_id: "" });
      // if (!res.code && res.data) {
      //   item = {
      //     id,
      //     name: res.data.name,
      //     mobile: res.data.mobile,
      //     city_name: res.data.city_name,
      //     province_name: res.data.province_name,
      //     district_name: res.data.district_name,
      //     address: res.data.address,
      //     cover_url: res.data.cover_url,
      //     open_status: res.data.open_status,
      //     shop_time_type: res.data.shop_time_type,
      //     end_time: res.data.end_time,
      //     start_time: res.data.start_time,
      //     latitude: res.data.latitude,
      //     longitude: res.data.longitude,
      //     distance: "未知",
      //   };
      //   // uni.setStorageSync("storeMdData", JSON.stringify(item));
      // }

      // this.showShopList = false;
      // this.init();
      // uni.setStorageSync("dandianpu", true);
      // this.$emit("callBack", item);

      uni.reLaunch({
        url: `/pages/home/home`
      });
    },

    scrolltolower() {
      if (this.isEnd) {
        return;
      }

      this.storeList();
    },

    clearData() {
      this.list = [];
      this.page = 1;
      this.isEnd = false;
      this.storeList();
    },

    async storeList() {
      let {
        page,
        size: limit,
        list: oldList,
        keyword,
        longitude,
        latitude
      } = this;
      const res = await this.$allrequest.shop.storeList({
        page,
        limit,
        keyword,
        longitude,
        latitude
      });
      uni.stopPullDownRefresh();
      if (res.code === 0) {
        let { list, row_count } = res.data,
          count = parseInt(row_count);

        if (list.length) {
          oldList.push(...list);
          this.page = this.page + 1;
        }

        if (oldList.length >= count) {
          this.isEnd = true;
        }
      }
    },

    phoneToShop(num) {
      this.$utils.makePhoneCall(num);
    },

    guideToShop(item) {
      if (!item.latitude) return;
      uni.openLocation({
        latitude: parseFloat(item.latitude),
        longitude: parseFloat(item.longitude)
      });
    },

    openPop() {
      if (this.one_store_switch_store) this.showPopup = true;
    },

    async init() {
      this.cacheStoreList = uni.getStorageSync("cacheStoreList") || [];

      let { longitude, latitude } = this;
      const res = await this.$allrequest.diy.getStore({
        longitude,
        latitude
      });
      if (res.code === 0) {
        if (res.data.coordinate) {
          let [latitude, longitude] = res.data.coordinate.split(",");
          res.data.latitude = latitude;
          res.data.longitude = longitude;
        }

        this.data = res.data;
      }
    },

    openMap() {
      let { coordinate, address, name } = this.data,
        [latitude, longitude] = coordinate.split(",");

      uni.openLocation({
        latitude: parseFloat(latitude),
        longitude: parseFloat(longitude),
        address,
        name
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.shopInfo {
  position: relative;
  margin: 20rpx 0 24rpx;
  padding: 24rpx;
  background: #fff;
  border-radius: 20rpx;
}

.shopInfoData {
  display: flex;
}

.shopInfoDataLet {
  flex: 1;
  overflow: hidden;
  margin-right: 118rpx;

  .name {
    margin-bottom: 20rpx;
    font-size: 44rpx;
    font-weight: bold;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .addr {
    display: flex;
  }

  .addrCon {
    flex: 1;
    overflow: hidden;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .distance {
    padding: 12rpx 0;
    font-size: 24rpx;
    color: #262626;
  }

  .tab {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #f0250e;

    .iconfont {
      font-size: 22rpx;
    }
  }
}

.logo {
  margin-top: 12rpx;
  width: 128rpx;
  height: 128rpx;
  background: #fff;
  border: 2rpx solid #f0f0f0;
  border-radius: 16rpx;
  overflow: hidden;

  image {
    display: block;
    height: 100%;
    width: 100%;
  }
}
.popData {
  padding: 26rpx 24rpx 50rpx;
  width: 80vw;
  .title {
    padding-bottom: 56rpx;
    font-weight: bold;
    font-size: 32rpx;
    // text-align: center;
  }

  .info {
    padding-bottom: 30rpx;
    display: flex;
    align-items: center;

    .img {
      width: 96rpx;
      height: 96rpx;
      border: 2rpx solid rgba(112, 112, 112, 0.2);
      border-radius: 16rpx;
      overflow: hidden;

      image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
      }
    }

    .txt {
      margin-left: 20rpx;
      flex: 1;
      overflow: hidden;
      font-size: 30rpx;
      color: #191919;
    }
  }

  .imgTxt {
    // display: flex;
    // align-items: center;
    padding: 20rpx 24rpx;
    border: 2rpx solid #f0250e;
    border-radius: 20rpx;

    .active {
      display: inline-block;
      padding: 4rpx 10rpx;
      background: #fde9e7;
      color: #f0250e;
      border-radius: 4rpx;
    }

    .name {
      padding: 12rpx 0;
      flex: 1;
      overflow: hidden;
      font-size: 26rpx;
      color: #191919;
      font-weight: bold;
    }

    .distance {
      font-size: 22rpx;
      color: #9f9f9f;
    }
  }

  .list {
    padding-bottom: 20rpx;
    .tit {
      display: flex;
      align-items: center;
      padding-bottom: 20rpx;
      font-size: 28rpx;
      color: #262626;
      font-weight: bold;
    }

    .listItem {
      margin-bottom: 20rpx;
      padding: 14rpx 28rpx;
      background: #f9f8f9;
      border-radius: 20rpx;

      &.on {
        background: #fde9e7;
        color: #f0250e;
      }
    }

    .name {
      padding-bottom: 8rpx;
      font-size: 26rpx;
      color: #262626;
    }

    .distance {
      font-size: 22rpx;
      color: #9f9f9f;
    }

    .name,
    .distance {
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .select {
    margin: 20rpx 0;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    border-radius: 32px;
    border: 2rpx solid #d1d1d1;
    font-size: 28rpx;
  }

  .listBtn {
    height: 76rpx;
    line-height: 76rpx;
    background: #f0250e;
    border-radius: 32px;
    font-size: 32rpx;
    color: #fff;
    text-align: center;
  }

  .item {
    display: flex;
    padding: 20rpx 0;
    text-align: left;
    background: none;
    line-height: normal;

    &:after {
      display: none;
    }
  }

  .icon {
    width: 68rpx;

    .iconfont {
      font-size: 40rpx;

      &.icon-a-map {
        margin-left: 6rpx;
      }
    }
  }

  .con {
    flex: 1;
    overflow: hidden;

    .name {
      font-size: 28rpx;
      color: #262626;
    }

    .addr {
      font-size: 28rpx;
      color: #8c8c8c;
    }
  }
}

.shop-icons {
  display: flex;
  justify-content: space-between;
  padding-top: 80rpx;
  width: 120rpx;

  .icon-box {
    text-align: center;
  }

  .txt {
    font-size: 20rpx;
    color: #8c8c8c;
  }

  .confont {
    font-size: 40rpx;
    color: #262626;
  }
}

.popShopList {
  padding: 0 36rpx;

  .scrollView {
    margin: 10rpx 0 20rpx;
  }

  .title {
    padding: 26rpx 0 34rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #262626;
  }

  .search {
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    height: 64rpx;
    border-radius: 32px;
    background: #f2f2f2;

    .iconfont {
      color: #9b9b9b;
    }
  }

  .search-input {
    margin-left: 10rpx;
    width: 100%;
    flex: 1;
    font-size: 32rpx;
    color: #262626;
  }

  .list {
    padding: 10rpx 0 32rpx;
  }

  .item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      left: 156rpx;
      bottom: 0;
      right: 0;
      height: 2rpx;
      background: #f8f8f8;
    }

    &:lasf-of-type:after {
      display: none;
    }

    .img {
      width: 144rpx;
      height: 144rpx;
      background: #f2f2f2;
      border-radius: 10rpx;

      image {
        display: block;
        width: 144rpx;
        height: 144rpx;
        border-radius: 10rpx;
      }
    }

    .txt {
      flex: 1;
      overflow: hidden;
      margin: 0 18rpx;
      height: 144rpx;

      .name {
        flex: 1;
        overflow: hidden;
        font-size: 26rpx;
        color: #262626;
        font-weight: bold;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .address {
        font-size: 24rpx;
        color: #8c8c8c;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        overflow: hidden;
      }

      .distance {
        font-size: 24rpx;
        color: #f0250e;
      }
    }
  }

  .btn {
    .iconfont {
      font-size: 40rpx;
    }

    .icon-xuanzekuangmoren {
      color: #707070;
    }

    .icon-success-fill {
      color: #f0250e;
    }
  }

  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
    height: 80rpx;
    background: #f0250e;
    border-radius: 32px;
    font-size: 32rpx;
    color: #fff;
  }
}

.scrollView {
  height: 800rpx;
  overflow-y: auto;
}

.shareButton {
  border: initial;
}
</style>
